<script setup lang="ts">
import { ref, provide } from "vue";
import LNav from "@/components/LNav.vue";

const theme = ref("dark");
provide("theme", theme);
const language = ref<"en" | "zh">("zh");
provide("language", language);
</script>

<template>
  <div>
    主题颜色：
    <select v-model="theme">
      <option value="dark">深色</option>
      <option value="light">浅色</option>
    </select>
    语言：
    <select v-model="language">
      <option value="en">英语</option>
      <option value="zh">中文</option>
    </select>
  </div>
  <LNav />
  <div class="router-block">
    <router-view />
  </div>
</template>

<style scoped>
.router-block {
  padding: 20px 0 0 0;
  border-top: 1px solid #ccc;
  height: calc(100dvh - 200px);
  overflow: auto;
}
</style>
